//Tao ra mot box co the drag drop
var OWL_CACHE_LIGHTBOX = [];
var LIGHTBOX_ZINDEX = 2000;
function createMask(){
	$("<div id='_mask'></div>")
		.css({
			opacity: '0.3',
			background:'#000',
			position:'fixed',
			top:'0px',
			left:'0px',
			'z-index':2000
		})
		.appendTo("body");
		
	function automask(){
		var width  = Math.max(document.body.scrollTop,document.scrollTop) + Math.max($(window).width(),$("#wrapper").width(),$("body").width());
		var height = Math.max(document.body.scrollTop,document.scrollTop) + Math.max($(window).height(),$("#wrapper").height(),$("body").height());
		$("#_mask")
			.css({
				width: width+'px',
				height: height+'px'
			})			
	}
	automask();
	$(window).onResize(automask);	
}

function range(a,b,c){
	var x=a;
	if( b ) x = Math.max(b,x);
	if( c ) x = Math.min(c,x);
	return x;
}

Owl(function($){
	var obj_drag = null, drag_x =0, drag_y = 0, obj_resize = null, resize_x = 0, resize_y = 0, resize_dir;

	$(document)
		.onMousemove(function( event ){
			if( obj_drag ){
				$( obj_drag ).css({
					left: Math.max(0,event.pageX - drag_x) + 'px',
					top: Math.max(0,event.pageY - drag_y) + 'px'
				});
			}	

			if( obj_resize ){									
				var resize = obj_resize.resize;
				var top = $(obj_resize).top(), left = $(obj_resize).left(),
					dx 	= event.pageX - resize_x, dy = event.pageY - resize_y;
				var $e 	= $(obj_resize).find(resize.selector),
					sx 	= parseInt($e.css('width')), sy = parseInt($e.css('height'));
					
				switch(resize_dir){
					case "n":
						$(obj_resize)
							.css({
								top: Math.max(0,top + dy) + 'px'
							});
						$e
							.css({
								height: range(sy - dy, resize.minHeight, resize.maxHeight)  +'px'										
							});
						break;	
					case "s":
						$e
							.css({
								height: range(sy + dy, resize.minHeight, resize.maxHeight ) +'px'										
							});
						break;	
					case "w":
						$(obj_resize)
							.css({
								left: Math.max( 0, left + dx ) + 'px'
							});
						$e
							.css({
								width: range( sx - dx, resize.minWidth, resize.maxWidth ) +'px'										
							});
						break;	
					case "e":
						$e
							.css({
								width: range( sx + dx, resize.minWidth, resize.maxWidth ) +'px'										
							});
						break;	

					case "nw":
						$(obj_resize)
							.css({
								top: Math.max(0,top + dy) + 'px',
								left: Math.max(0,left + dx) + 'px'
							});
						$e
							.css({
								width: range(sx - dx, resize.minWidth, resize.maxWidth ) +'px',
								height: range(sy - dy, resize.minHeight, resize.maxHeight ) +'px'																			
							});
						break;
					case "ne":
						$(obj_resize)
							.css({
								top: Math.max(0,top + dy) + 'px'
							});
						$e
							.css({
								width: range(sx + dx, resize.minWidth, resize.maxWidth ) +'px',
								height: range(sy - dy, resize.minHeight, resize.maxHeight ) +'px'																			
							});
						break;
					case "se":
						$e
							.css({
								width: range(sx + dx, resize.minWidth, resize.maxWidth ) +'px',
								height: range(sy + dy, resize.minHeight, resize.maxHeight ) +'px'																			
							});
						break;
					case "sw":
						$(obj_resize)
							.css({
								left: Math.max(0,left + dx) + 'px'
							});
						$e
							.css({
								width: range(sx - dx, resize.minWidth, resize.maxWidth ) +'px',
								height: range(sy + dy, resize.minHeight, resize.maxHeight ) +'px'																			
							});
						break;							
				}
				
				resize_x = event.pageX;
				resize_y = event.pageY;
			}
			
		});

	$(document )
		.onMouseup(function(){
			obj_drag = null;
			obj_resize = null;
			$("body")
				.removeClass('lightbox-unselect lb-n lb-s lb-w lb-e lb-ne lb-nw lb-se lb-sw');
		})
		.onKeydown(function( event ){
			if( event.KEY_ESC ){
				$(obj_drag)
					.each(function(){
						$(this).remove();
						$("#_mask").hide();
					});
			}
		});
				
	$.createLightBox  = function( options ){
		var settings = $.Extend({ 
			center: true,
			title: "",
			mask: false,
			css:{},
			css_content:{},
			id: 'lightbox-'+(new Date).getTime(),
			auto_hidden: false
			//callback:	
		},options||{});
		
		
		//Xoa lightbox cu~
		$('#'+settings.id).remove();
			

		if( !OWL_CACHE_LIGHTBOX[settings.id] ){
			OWL_CACHE_LIGHTBOX[settings.id] = $("<div class='lightbox"+(settings.auto_hidden ? ' app-auto-hidden': '')+"' id='"+ settings.id +"'>"
				+"<div class='lightbox-inner'><div class='lightbox-bar'><span class='lightbox-title'>"+settings.title+"</span><a class='lightbox-close'></a></div>"
				+"<div class='lightbox-content'>Loading...</div></div></div>").k(0);	


				
				
			if( settings.resize ){	
				var labels = {
					w: "<div style='width:2px;height:100%; cursor:w-resize;position:absolute;left:0px;top:0px;z-index:1'></div>",
					e: "<div style='width:2px;height:100%; cursor:e-resize;position:absolute;right:0px;top:0px;z-index:1'></div>",
					n : "<div style='width:100%;height:2px; cursor:n-resize;position:absolute;top:0px;left:0px;z-index:1'></div>",
					s: "<div style='width:100%;height:2px; cursor:s-resize;position:absolute;bottom:0px;left:0px;z-index:1'></div>",
					nw: "<div style='width:3px;height:3px; cursor:nw-resize;position:absolute;top:0px;left:0px;z-index:2'></div>",
					ne: "<div style='width:3px;height:3px; cursor:ne-resize;position:absolute;top:0px;right:0px;z-index:2'></div>",
					sw: "<div style='width:3px;height:3px; cursor:sw-resize;position:absolute;bottom:0px;left:0px;z-index:2'></div>",
					se: "<div style='width:3px;height:3px; cursor:se-resize;position:absolute;bottom:0px;right:0px;z-index:2'></div>"
				};
			
				var elem = OWL_CACHE_LIGHTBOX[settings.id];
				for( var x in labels ){
					$( labels[x] )
						.set('_dir',x)
						.appendTo(elem)
						.onMousedown(function( event ){
							resize_x = event.pageX;		
							resize_y = event.pageY;						
							resize_dir = this._dir;
							elem.resize = settings.resize;
							obj_resize = elem;	
							$("body").addClass('lightbox-unselect lb-'+this._dir).selectText(0,-1);
						});				
				}
		
			}
		}	
			
		$(OWL_CACHE_LIGHTBOX[settings.id])
			.css("z-index:"+(LIGHTBOX_ZINDEX++))
			.find(".lightbox-bar .lightbox-close,.box-close")		
			.onClick(function(){
				$('#'+settings.id)
					.each(function(){
						if( settings.mask ){
							$("#_mask").hide();
						}					
						$(this).remove();
					});
			})
			.find(".lightbox-bar > .lightbox-title")
			.htm( settings.title );
			
		if( settings.mask ){
			if( $("#_mask").size() == 0 ){
				createMask();
			}else{
				$("#_mask").show();
			}
		}

		$( OWL_CACHE_LIGHTBOX[settings.id] )
			.appendTo('body')
			.css({
				visibility : 'hidden'
			})
			.onMousedown(function( event ){
				$(this).css("z-index:"+ (LIGHTBOX_ZINDEX++));
				drag_x = event.offsetX;		
				drag_y = event.offsetY;
			})
			.child("div")
			.child(".lightbox-bar")		
			.onMousedown(function( event ){ 
				obj_drag = this.parentNode.parentNode;
				$("body").addClass('lightbox-unselect').selectText(0,-1);
				event.preventDefault();
			})		
			.parent(0)
			.child(".lightbox-content")
			.css( settings.css_content||{})
			.each( options.callback|| function(){} )
			.parent(1)
			.each(function(){
				var css = {
					visibility: 'visible'
				};
				if( settings.center ){
					css.top = (document.body.scrollTop + Math.max(0, $(window).height()/2 - $(this).height()/2))  + "px";
					css.left = $(window).width()/2 - $(this).width()/2 + "px";
				}
				
				//alert(document.body.scrollTop+" "+ $(this).height())
				css = $.Extend(css,settings.css||{});
				$(this)
				.css(css)
				.child(".lightbox-content")	
				.set('setCenter',function(){
					var elem = this.parentNode.parentNode;
					$(elem).animate({
						top: document.body.scrollTop||0 + Math.max(0,$(window).height()/2 - $(elem).height()/2) + "px",	
						left: $(window).width()/2 - $(elem).width()/2 + "px"
					},{
						duration:200
					})				
				})
			});		
	};

	$.Alert = function( message, callback ){
		if( $("#_mask").size() == 0 ){
			createMask();
		}else{
			$("#_mask").show();
		}
		var fn = callback||function(){};	
		$.createLightBox({
			id: '__alert__',
			title: 'Lời nhắn từ hệ thống',
			css: {
				'z-index':5000,
				'text-align':'center'
			},
			callback: function(){
				$(this)
					.htm( message + "<br/><div class='x-ok x-button'>Xác nhận</div>" )
					.find(".x-ok")
					.onClick(function(){
						$("#_mask").hide();
						remove_frame(this);	
						fn();
					});
			}	
		});

	};


	$.Confirm = function( message, fc ){
		if( $("#_mask").size() == 0 ){
			createMask();
		}else{
			$("#_mask").show();
		}

		fc = fc||function(){};
		$.createLightBox({
			id: '__confirm__',
			auto_hidden: true,
			title:'Xác nhận',
			css: {'z-index':5000},
			callback: function(){
				var elem = this;
				$(this)
					.htm( message 
						+ "<div style='text-align:center;padding:10px'><div class='x-button x-ok'>Đồng ý</div>"
						+ "<div class='x-button x-cancel'>Bỏ qua</div></div>" )
					.find(".x-cancel")
					.onClick(function(){
						$("#_mask").hide();
						remove_frame(this);
					});
					
				$(this)
					.find(".x-ok")
					.onClick(function(){
						$("#_mask").hide();
						fc.call( elem );				
					});
			}	
		});

	}
});


function remove_frame( obj ){
	$(obj).parent('.lightbox').slice(0,1).remove();
}





